<template>
  <div id="app-menu"  class="pagebox" :style="{'height':menuHeight,'width':menuWidth} ">
    <a-menu
    style="height:100%"
      :default-selected-keys="selectedKeys"
      mode="inline"
     :theme="theme?'light':'dark'"
      :inline-collapsed="collapsed"
      @click="handlemenu"

    >
      <a-menu-item key="/basicInformation" v-if="roleId==2">
        <a-icon type="robot" />
        <span class="spanfont">基本信息</span>
      </a-menu-item>
      <a-menu-item key="/manufacturingStatistics" v-if="roleId==2">
        <a-icon type="line-chart" />
        <span class="spanfont"> 生产统计</span>
      </a-menu-item>
      <a-menu-item key="/machineReport" v-if="roleId==2||roleId==3" >
        <a-icon type="line-chart" />
        <span class="spanfont">调机报表</span>
      </a-menu-item>
      <a-sub-menu key="classes" v-if="roleId==2||roleId==3">
        <template slot="title"> <a-icon type="schedule" /><span class="spanfont">报警分析</span> </template>
        <a-menu-item v-if="roleId==2"   key="/policeStatistics">
          <span class="spanfont">报警统计</span>
        </a-menu-item>
        <a-menu-item key="/alarmHistory">
          <span class="spanfont">报警历史</span>
        </a-menu-item>
      </a-sub-menu>
    </a-menu>
    <div class="menu-openClose" :style="{'width':menuWidth} " @click="openmenu">
      <a-icon :type="collapsed?'menu-unfold':'menu-fold'" style="font-size: 20px;color:#fff" />
    </div>

  </div>
</template>

<script>
import varibless from "@assets/styles/varibless.less";

export default {
  name: "statisMenu",
   props:{
    height:{
      type:String,
      default:'90vh'
    }
  },
  data() {
    return {
      menuHeight: '90vh',
      menuWidth: "200px",
      collapsed: false,
      collapsedWy: "80px",
      collapsedWn: "200px",
      varibless: varibless,
      // selectedKeys: ["/basicInformation"],
      roleId:null

    };
  },
 
   computed: {
    theme: function () {
      return this.$store.getters.thisTheme
    },
  },
   watch:{
    height: {
      deep: true,
      handler(val) {
        this.menuHeight=val
        return
      }
    }
  },
  created() {
     this.menuHeight=this.height
       let _this=this

    //    setTimeout(()=>{
    //   window.onresize = function () { // 定义窗口大小变更通知事件
    //   // _this.screenWidth = document.documentElement.clientWidth // 窗口宽度
    //    _this.menuHeight = (document.documentElement.clientHeight - _this.varibless.headerHeightpxno) + "px";
    //  // _this.appBodyHeight = (document.documentElement.clientHeight-_this.varibless.headerHeightpxno)+'px' // 窗口高度
    // }
    // this.menuHeight = (document.body.clientHeight - this.varibless.headerHeightpxno) + "px";
  
    //  },200)
    let url = this.$route.fullPath;

    if (url&&url!='/workshop'&&url!=='/distributionMap'&&url!=='/equipmentList') {
      this.selectedKeys = [];
      this.selectedKeys.push(url);
    }else{
      this.selectedKeys = ["/basicInformation"];
    }
    this.roleId=JSON.parse(localStorage.getItem("roleId"));
  },


  methods: {
    //点击菜单
    handlemenu(val) {
      let fullpath = this.$route.fullPath;
      let path = val.key;
      if (val.key && path !== fullpath) {
        this.$router.push(path);
        this.selectedKeys = [];
        this.selectedKeys.push(path);
      }
    },
    //展开合拢菜单
    openmenu() {
      this.collapsed = !this.collapsed;
      this.$emit("collapsedChange", this.collapsed);
      if (this.collapsed) {
        this.menuWidth = this.varibless.menuWClose;
      } else {
        this.menuWidth = this.varibless.menuWopen;

      }
    },
    home: function() {
      // alert("你点击了首页");
    }
  }
};
</script>

<style scoped lang="less">
#app-menu {
  float: left;
  background-color:#001529;
  position: relative;
  box-sizing: border-box;
  // padding-bottom: 40px;
  transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
  zoom: 1;
}
 #app-menu .spanfont{
   font-size:  16px!important;
  }
.menu-openClose {
  width: 100%;
  position: absolute;
  bottom: 0;
  line-height: 40px;
  height: 40px;
  text-align: center;
}
</style>
